<!--
 * @Author: Wang WeiHao
 * @Date: 2024-01-11 17:58:03
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-05-07 11:44:40
 * @Description: 
 * @FilePath: \hmcs_map\src\views\spone\frontPage\pai\pai.vue
-->
<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'排-安全排放,疏解隐患'"
      :secondTitles="['雨水排水体积统计', '排水设施统计', '排水成效展示']"
      :slotWidth="[28, 36, 36]"
    >
      <template #left>
        <pai1
          :selectValue="left_value"
          :selectValueMonth="left_valueMonth"
        ></pai1>
      </template>
      <template #middle>
        <pai2
          :selectValue="middle_value"
          :echartsData="echartsData1"
          v-if="echartsData1"
        ></pai2>
      </template>
      <template #right>
        <pai3
        :echartsData="echartsData2" v-if="echartsData2"
        ></pai3>
      </template>
      <template #left_control>
        <div class="d-flex">
          <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="new Date().getFullYear() - 1"
            v-model:select-value="left_value"
            :width="100"
          >
          </proSelect>
          <proSelect
            :optionsData="useOptions().monthOptions()"
            :defaultSelectValue="0"
            v-model:select-value="left_valueMonth"
            :width="100"
          >
          </proSelect>
        </div>
      </template>
      <template #middle_control>
        <proSelect
          :optionsData="useOptions().year()"
          :defaultSelectValue="new Date().getFullYear() - 1"
          v-model:select-value="middle_value"
          :width="150"
        >
        </proSelect>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import containTemplete from "@/components/project/containTemplete.vue";
import { useOptions } from "@/hook/useOptions";
import pai1 from "./pai1.vue";
import pai2 from "./pai2.vue";
import pai3 from "./pai3.vue";
import pie_table from "@/components/project/pie_table.vue";
import broken_line from "@/components/project/broken_line.vue";
import colums_nomal from "@/components/common/echart/colums_nomal.vue";
const left_value = ref();
const left_valueMonth = ref();
const middle_value = ref();
const echartsData1 = ref();
const echartsData2 = ref();

const jsonData: any = inject("jsonData");
watch(
  () => jsonData.value,
  (newValue: any, oldValue) => {
    if (newValue) {
      echartsData2.value = newValue.jsc.pscxzs;
      echartsData1.value = newValue.jsc.pssstj;
    }
  }
);
</script>

<style scoped lang="less"></style>
